<template>
    <el-dropdown
          trigger="hover"
          @command="hanldeUserCenter"
          :show-timeout="0"
          class="mx15 cP"
        >
          <span class="el-dropdown-link">
            <div class="aic">
              <el-avatar
                size="small"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              <div style="color: var(--navColorFont)" class="llt-default-font-color mx15">
                {{ getUserInfo.nickName ? getUserInfo.nickName : "10001号" }}
              </div>
            </div>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1" icon="el-icon-s-custom"
                >个人中心</el-dropdown-item
              >
              <el-dropdown-item command="2" icon="el-icon-s-release" divided
                >退出系统</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
</template>

<script setup lang="ts">
import {ref,reactive,computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { store } from '/@ts/store';
const router = useRouter();
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
 const activeIndex =ref(0);
 const state = reactive({
   userInfo:{

   }
 })
 onMounted(() => {
});
const getUserInfo = computed(()=> {
  let data: any = store.state
  return data.loginModule.userInfo;
}) ;
//用户头像菜单
const hanldeUserCenter = (e: string) => {
  switch (e) {
    case "1":
      //个人中心
      router.push("/adminEdit");
      break;

    default:
      //退出
      
      store.dispatch('loginModule/LogOut').then(() => {
         router.push("/login");
        })
      break;
  }
};
const handleSelect = ()=>{}
 defineProps({
  msg:  {
      type: String,
      required: true
    }
})

</script>

<style  scoped lang="scss" >

</style>
